<template>
  <h1>销量热词表</h1>

  <div id="chartContainer">
    <canvas id="barChart"></canvas>
  </div>

</template>

<script>
export default {
  name: "销量热词"

}
// JavaScript代码
// 模拟数据
const hotwords = [
  { hotword: "鸢尾", count: 10 },
  { hotword: "百合", count: 15 },
  { hotword: "丁香", count: 5 },
  { hotword: "牡丹", count: 20 },
  { hotword: "玫瑰", count: 12 }
];

// 提取热词和次数数据
const labels = hotwords.map(hotword => hotword.hotword);
const data = hotwords.map(hotword => hotword.count);

// 获取画布元素
const ctx = document.getElementById("barChart").getContext("2d");

// 绘制柱状图
new Chart(ctx, {
  type: "bar",
  data: {
    labels: labels,
    datasets: [{
      label: "销量",
      data: data,
      backgroundColor: "rgba(54, 162, 235, 0.6)",
      borderColor: "rgba(54, 162, 235, 1)",
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
        precision: 0
      }
    }
  }
});
</script>

<style scoped>
/* CSS样式 */
body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
}
canvas {
  max-width: 600px;
  margin-top: 20px;
}
</style>